<!-- Icon.vue -->
<template>
  <div
    v-html="svgContent"
    :style="{
      display: 'inline-flex',
      width: width,
      color: color,
      verticalAlign: 'middle',
    }"
  ></div>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  width: {
    type: String,
    default: "1em",
  },
  color: {
    type: String,
    default: "#606266",
  },
});

// const iconPath = computed(() => {
//   return new URL(`/src/assets/svg/${props.name}.svg`, import.meta.url).href;
// });

/**
 * 精确控制 SVG 颜色
 * 使用前请确保：
 *  1. SVG 文件没有内联的 fill 属性
 *  2. SVG 文件是单色图标（多色图标需要额外处理）
 */
const svgContent = ref("");
onMounted(async () => {
  const response = await fetch(
    new URL(`/src/assets/svg/${props.name}.svg`, import.meta.url)
  );
  let svg = await response.text();
  // 移除 SVG 中可能存在的 fill 属性
  svg = svg.replace(/fill="[^"]*"/g, "");
  svgContent.value = svg;
});
</script>
